<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        [v-cloak]{
            display: none;
        }
        .list{
            display: flex;
            border:1px solid #ccc;
            padding:10px 0;
            color:burlywood;
            align-items: center;
        }
        .list li{
            flex:1;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div v-if="goodsList.length!==0" style="width:1000px;margin:100px auto;">
           <ul class="list">
               <li>
                   <input @change="checkAll" type="checkbox" v-model="isCheckAll"> 全选
               </li>
               <li>商品</li>
               <li>单价</li>
               <li>数量</li>
               <li>金额</li>
               <li>操作</li>
           </ul>
           <div style="margin-top:20px;border:1px solid green;padding:20px;">
            <ul v-for="item in goodsList" class="list" style="border:none;border-bottom:1px solid #ccc;">
                <li >
                    <input type="checkbox" @change="changeCheck" v-model="item.isChecked">
                </li>
                <li>
                    {{item.name}}
                </li>
                <li style="color:gold;">
                    {{item.price | fixed |fmtRMB}}
                </li>
                <li>
                   <button style="padding:5px;" :disabled="item.count===1" @click="item.count--">-</button>
                   <input @blur="changeCount(item,$event)"  @keydown.enter="changeCount(item,$event)" type="text" style="width:30px;text-align:center;":value="item.count">
                   <button style="padding:5px;" :disabled="item.count===limitCount" @click="item.count++">+</button>
                </li>
                <li>
                    {{calc(item) | fixed | fmtRMB}}

                </li>
                <li>
                  <a  @click="del(item.id)"style="border:1px solid red;width:100px;
                  padding:10px 20px;display: inline-block;vertical-align: middle;" >删除</a>
                </li>
                

            </ul>

           </div>

        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            filters:{
                fixed(val){
                    return val.toFixed(2)

                },
                fmtRMB(val){
                    return "¥ " + val
                }

            },
            data(){
                return{
                    isCheckAll:false,
                    limitCount: 5,
                    goodsList: [
                        {
                            id: 1,
                            name: "Chestnut Cream",
                            price: 200,
                            count: 1,
                            isChecked: false
                        },
                        {
                            id: 2,
                            name: "栗蓉暗香",
                            price: 300,
                            count: 2,
                            isChecked: false
                        }
                    ]

                }
            },
            methods:{
                checkAll(){
                    this.goodsList.forEach(e => {
                        e.isChecked=this.isCheckAll      
                    });
                },
                changeCheck(){
                    this.checkAll =this.goodsList.every(r=>r.isChecked)
                },
                del(){

                },
                calc(item){
                    return item.price*item.count
                }

            },
            mounted(){

            }

        })

    </script>
</body>
</html>